<template>
  <div class="cur_type_name">{{ curTypeText }}</div>
  <el-select
    style="margin-bottom: 30px"
    class="qf_select"
    @change="change_prop_type"
    v-model="curTypeValue"
    :placeholder="$t('merak.placeholder_select')"
  >
    <el-option v-for="item in ownAllType" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
  <el-input
    style="margin-bottom: 15px"
    v-model="treeFilter"
    :placeholder="$t('merak.placeholder_filter')"
    @input="value => treeRef?.filter(value)"
  />
  <div class="tree-wrapper">
    <el-scrollbar>
      <!-- noCurCss -->

      <!-- :current-node-key="asideDefaultVal" -->
      <!-- :current-node-key="defChecked" -->
      {{ asideDefaultValue }}

      <el-tree
        class="merakTree"
        ref="treeRef"
        node-key="id"
        show-checkbox
        :default-expanded-keys="[asideDefaultValue]"
        :data="dataList"
        :class="curlevel > 1 ? 'merakTree' : 'merakTree noThree'"
        :props="{ children: 'childs' }"
        :highlight-current="true"
        :current-node-key="[asideDefaultValue]"
        :filter-node-method="(value, tree) => tree.label.includes(value)"
        @current-change="changeTreeFilter"
      />
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch, defineEmits, onMounted, watchEffect, nextTick, inject } from "vue";

/**
 * 定义组件接收的props。
 * @property {Array} list - 默认为空数组的列表 prop。
 * @property {String} curType - 默认为"sale"的当前类型 prop。
 * @property {Array} ownAllTypes - 默认为空数组的所有类型 prop。
 */
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  curType: {
    type: String,
    default: "sale"
  },
  ownAllTypes: {
    type: Array,
    default: () => []
  },
  asideDefaultVal: {
    type: String,
    default: ""
  }
});

/**
 * 定义组件可以发射的事件。
 * @event {("changeTree" | "initTree")} changeTree - 当需要更改树结构时触发。
 * @event {("changeTree" | "initTree")} initTree - 当需要初始化树结构时触发。
 */
const $emit = defineEmits(["changeTree", "initTree"]);

// 声明并初始化组件的状态
const treeFilter = ref("");
const treeRef = ref();
const treedata = ref(props.list);
const curTypeValue = ref(props.curType);
const asideDefaultVal = ref("");
const defChecked = ref("1-1");
const curTypeText = ref("");
const ownAllType = ref(props.ownAllTypes);
const curlevel = ref("2");

const dataList = inject("asideList");
const changeTreeEvent = inject("changeTree");
const initTreeEvent = inject("initTree");
const asideOwnAllTypeList = inject("asideOwnAllType");
const curTreeTypeTextData = inject("curTreeTypeText");
const asideDefaultValue = inject("asideDefault");

/**
 * 切换当前商品类型。
 * @param {String} id - 要切换的商品类型的ID。
 */
const change_prop_type = id => {
  $emit("initTree", id);
};

/**
 * 根据ID更改树过滤器。
 * @param {String} row - 触发更改的row。
 */
const changeTreeFilter = row => {
  console.log(row);
  if (row.childs && row.childs.length > 0) {
    curlevel.value = 1;
  } else {
    curlevel.value = 2;
  }

  $emit("changeTree", row);
};

/**
 * 根据提供的值在ownAllType中查找并设置当前类型文本。
 * @param {String} val - 需要查找的值。
 */
const findOption = val => {
  ownAllType.value.find(option => {
    if (option.value == val) {
      curTypeText.value = option.label;
    }
  });
};
// 组件挂载时，初始化当前类型文本
onMounted(() => {
  findOption(props.curType);
  nextTick(() => {
    console.log(treeRef.value!.setCheckedKeys([asideDefaultValue], false));
  },2000); 
});

watchEffect(
  () => dataList.value,
  val => {
    console.log(dataList);
  }
);

// 监听props.curType的变化并更新curTypeValue
watch(
  () => props.curType,
  val => {
    curTypeValue.value = val;
  }
);

// 监听props.curType的变化并更新curTypeValue
watchEffect(
  () =>   asideDefaultValue.value,
  val => {
    console.log(asideDefaultValue)
    // defaultValValue.value = val;
    // console.log( defaultValValue.value)
  }
);

// 监听curTypeValue的变化并更新当前类型文本
watch(curTypeValue, val => {
  findOption(val);
});
</script>

<style scoped lang="scss">
// .tree-wrapper {
//   flex: 1;
//   min-height: 0;
// }
// .cur_type_name {
//   padding: 0px 0px 10px;
//   font-size: 16px;
// }

// :deep(.el-tree--highlight-current) {
//   .el-tree-node.is-current > .el-tree-node__content {
//     background-color: var(--el-color-primary);
//     .el-tree-node__label,
//     .el-tree-node__expand-icon {
//       color: white;
//     }
//     .is-leaf {
//       color: transparent;
//     }
//   }
// }

// :deep(.merakTree.noThree .el-tree-node.is-current .el-tree-node__content) {
//   background-color: #fff !important;
// }

// :deep(
//     .merakTree.noThree.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__expand-icon
//   ) {
//   color: var(--el-tree-expand-icon-color) !important;
// }
// :deep(.merakTree.noThree.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label) {
//   color: var(--el-tree-text-color) !important;
// }
</style>